import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.css';
import { Component } from 'react';
import * as React from 'react';
import Counters from './components/counters';
import NavBar from './components/navbar';

class App extends Component {
  state = {
    counters: [
      { id: 1, value: 4 },
      { id: 2, value: 0 },
      { id: 3, value: 0 },
      { id: 4, value: 0 }
    ]
  }

  handleIncrement = (counter) => {
    console.log("Counter", counter)
    const counters = [...this.state.counters];
    const index = counters.indexOf(counter);
    counters[index] = { ...counter };
    counters[index].value++;
    this.setState({ counters });
  }

  handleDelete = (id) => {
    console.log("id", id);
    const counters = this.state.counters.filter(c => c.id !== id);
    this.setState({ counters });
  }

  render() {
    return (
      <React.Fragment>
        <NavBar />
        <main className="container">
          <Counters counters={this.state.counters}
            onIncrement={this.handleIncrement}
            onDelete={this.handleDelete}
          />
        </main>
      </React.Fragment>
    )
  }
}

export default App;
